<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单管理</title>
    <base href="/">

    <!--网页图标-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--bootstrap 样式-->
    <link rel="stylesheet" href="css/plugins/bootstrap/bootstrap.min.css">
    <!--fontawesome图标样式-->
    <link href="css/plugins/font-awesome/font-awesome.css" rel="stylesheet">
    <!--ztree-->
    <link rel="stylesheet" href="css/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css">

    <style>
        .divBtn{
            position: fixed;
            bottom: 0px;
            width: 100%;
            padding-left: 200px;
            padding-bottom: 10px;
            background-color: #FFF;
        }
        .col-xs-3{
            margin-top:5px ;
        }

        #search{
            margin-top: 15px;
        }

        #btnExpand,#btnCollapse{
            color: #676a6c;
            text-decoration: none;
        }

        #ec{
            margin-right: 23px;
        }
    </style>

</head>
<body>
<input type="hidden" id="parentId" name="parentId">
<input type="hidden" id="parentMenuName" name="parentMenuName">
<div class="container">
    <div class="row">
        <form role="form" class="form-inline pull-left" id="search">
            <div class="form-group">
                <label for="keywords" class="col-xs-3">关键字:</label>
                <div class="input-group col-xs-6">
                    <input type="text" id="keywords" class="form-control">
                    <span class="input-group-btn">
                            <button type="button" class="btn btn-default" onclick="searchTree()">搜索</button>
                        </span>
                </div>

            </div>
        </form>

        <span class="pull-right treeShowHideButton" >
                <label id="btnShow" title="显示搜索" style="display: none">︾</label>
                <label id="btnHide" title="隐藏搜索">︽</label>
            </span>
    </div>
    <div class="row">
        <div id="tree" class="pull-left ztree">xxx</div>
        <div class="pull-right" id="ec">
            <a href="javascript:void(0);" id="btnExpand">展开</a> / <a href="javascript:void(0);" id="btnCollapse">折叠</a>
        </div>
    </div>
    <div class="row divBtn">
        <a href="javascript:void(0);" class="btn btn-primary" onclick="sel()"> <i class="fa fa-check"></i> 确定</a>
        <a href="javascript:void(0);" class="btn btn-default" onclick="myclose()"> <i class="fa fa-close"></i> 关闭</a>
    </div>
</div>


<!--jquery 脚本 -->
<script src="js/plugins/jquery/jquery.min.js"></script>
<!--bootstrap脚本-->
<script src="js/plugins/bootstrap/bootstrap.min.js"></script>
<!--ztree-->
<script src="js/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>

<!--自定义js-->
<script src="js/common.js"></script>

<script>
  /*  var options = {
        url: "data/sys/menu.json",
        idKey: "menuId",
        pIdKey: "parentId",
        name: "menuName",
        clk: zOnClick
    };*/

  var options=JSON.parse(localStorage.getItem("options"));
  options.clk=zOnClick;



    function zOnClick(event, treeName, treeNode)
    {
        $("#parentId").val(treeNode[options.idKey]);
        $("#parentMenuName").val(treeNode[options.name]);
        event.preventDefault();
    }

    $.tree.init(options);
    
    $(".treeShowHideButton").click(function () {
        $("#search").slideToggle(200);
        $("#btnShow").toggle();
        $("#btnHide").toggle();
        $("#keywords").focus();
    });
    
    function  searchTree() {
        $.tree.search($("#keywords").val());
    }

    $("#keywords").bind("change cut input propertychange",searchTree);
    $("#keywords").bind("keydown",function (e) {
        if(e.which==13){
            searchTree();
            return false;
        }
    });

    function sel() {
        parent.selTreeValue($("#parentId").val(),$("#parentMenuName").val());

        myclose();
    }

    function myclose() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
</script>


</body>
</html>